<template>
  <div>
    <div class="mask"></div>
    <div class="share">
      <ul class="clearfix">
        <li class="fl shareLi" v-for="item in aFenxiang">
          <img :src="item.imgSrc" alt="">
          <p>{{item.API}}</p>
        </li>
      </ul>
      <div class="quxiao" @click="doShow">取消</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: true,
        aFenxiang: [
          {
            imgSrc: require('../../../assets/1first/限时断货分享/pengyouquan.png'),
            API: '微信朋友圈'
          },
          {
            imgSrc: require('../../../assets/1first/限时断货分享/weixin.png'),
            API: '微信好友'
          },
          {
            imgSrc: require('../../../assets/1first/限时断货分享/QQ.png'),
            API: 'QQ好友'
          },
          {
            imgSrc: require('../../../assets/1first/限时断货分享/QQkongjian.png'),
            API: 'QQ空间'
          },
          {
            imgSrc: require('../../../assets/1first/限时断货分享/weibo.png'),
            API: '微博'
          },
          {
            imgSrc: require('../../../assets/1first/限时断货分享/fuzhilianjie.png'),
            API: '复制链接'
          }
        ]
      }
    },
    methods: {
      doShow() {
        this.isShow = false
        this.$emit('cus-event', this.isShow)
      }
    }
  }
</script>
<style scoped>
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.4;
    /*height: 100%;*/
  }
  .share{
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10rem;
    background: #fff;
    padding: 0.44rem;
    box-sizing: border-box;
  }
  .shareLi{
    width: 33.33%;
    text-align: center;
    padding-top: 0.98rem;
  }
  .shareLi img{
    width: 1.42rem;
    margin-bottom: 0.44rem;
  }
  .shareLi p {
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    color: #333333;
  }
  .quxiao{
    position: absolute;
    bottom: 0.44rem;
    left: 0;
    right: 0;
    width: 3.78rem;
    height: 1.2rem;
    line-height: 1.2rem;
    color: #fff;
    background: #e53e42;
    border-radius: 5px;
    margin: 0 auto;
    font-weight: normal;
    font-stretch: normal;
    font-size: 0.53rem;
    text-align: center;
  }
</style>
